<template>
  <el-row justify="space-around" class="ranking" style="margin-top: 30px">
    <el-col class="ranking-item" :span="7">
      <span>{{ rankData[1].accumulateVisitNum }}</span>
      <span>{{ rankData[1].province }}</span>
      <span>TOP2</span>
    </el-col>
    <el-col class="ranking-item" :span="10">
      <span>{{ rankData[0].accumulateVisitNum }}</span>
      <span>{{ rankData[0].province }}</span>
      <span>TOP1</span>
    </el-col>
    <el-col class="ranking-item" :span="7">
      <span>{{ rankData[2].accumulateVisitNum }}</span>
      <span>{{ rankData[2].province }}</span>
      <span>TOP3</span>
    </el-col>
  </el-row>
</template>
<script setup>
import { getProvinceRank } from '@/api/activeFault'
const rankData = ref([
  { accumulateVisitNum: '', province: '' },
  { accumulateVisitNum: '', province: '' },
  { accumulateVisitNum: '', province: '' }
])
const provinceRank = () => {
  getProvinceRank().then(res => {
    rankData.value = res.data
  })
}
onMounted(() => {
  provinceRank()
})
</script>
<style scoped lang="scss">
  .ranking {
    min-height: 200px;

    .ranking-item {
      background-image: url('/src/assets/images/activeFault/ranking1.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      position: relative;

      &>span {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
        font-family: Helvetica Neue LT Pro-65 Medium, Helvetica Neue LT Pro;
        font-weight: normal;
        color: #46FFFF;
      }

      &>span:nth-child(2) {
        background: linear-gradient(134deg, #7DE7FF 0%, #00CFFF 50%, #7DE7FF 100%);
        top: 38%;
        color: #050426;
        padding: 4px 7px;
        font-size: 16px;
      }

      &>span:nth-child(3) {
        top: unset;
        font-weight: normal;
        color: #fff;
        font-size: 14px;
        bottom: 10%;
      }

      &:nth-child(2) {
        background-image: url('/src/assets/images/activeFault/ranking2.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position-y: 26%;

        &>span {
          font-size: 30px;
          top: 14%;
        }

        &>span:nth-child(2) {
          font-size: 18px;
          top: 35%;
        }

        &>span:nth-child(3) {
          font-size: 14px;
          // bottom: 5%;
          bottom: 0;
          top: unset;
        }
      }
    }
  }
</style>